<template>
  <swiper
    :autoplay="{
      delay: 5000,
      stopOnLastSlide: false,
      disableOnInteraction: false,
      pauseOnMouseEnter: true,
    }"
    loop
    :pagination="{
      el: '.related-pagination',
      clickable: true,
    }"
    :navigation="{
      nextEl: '.related-button-next',
      prevEl: '.related-button-prev',
    }"
    class="related-swiper"
    v-if="list.length"
  >
    <swiper-slide class="related-slide" v-for="item in list" :key="item.id">
      <toNews :detail="item" class="related-item">
        <div
          class="related-item-cover"
          :style="{
            '--pc': 'url(' + item.webimages + ')',
            '--mobile': 'url(' + item.mobileimages + ')',
          }"
        />

        <div class="related-item-title">{{ item.name }}</div>
        <div class="related-item-describe">{{ item.description }}</div>
        <div class="related-item-more">
          <more-detail />
        </div>
      </toNews>
    </swiper-slide>

    <template #container-start>
      <div class="related-button related-button-next"></div>
      <div class="related-button related-button-prev"></div>
      <div class="related-pagination"></div>
    </template>
  </swiper>
</template>

<script>
import toNews from "@/components/toNews";
export default {
  components: {
    toNews,
  },
  props: {
    list: [],
  },
  data() {},
  methods: {},
};
</script>
<style lang="scss" scoped>
.related {
  &-swiper {
    width: 1140px;
    display: flex;
    background-image: url("~@/assets/image/product/bg.png");
    background-position-x: 100%;
    background-position-y: center;
    background-repeat: no-repeat;
    background-size: contain;
  }

  &-item {
    width: 100%;
    cursor: pointer;
    display: flex;
    // justify-content: center;
    align-items: center;
    // align-items: stretch;
    height: 337px;
    position: relative;

    &-cover {
      margin-left: 50px;
      @include fn.scale(352px);
      background-image: var(--pc);
      background-size: cover;
      background-position: center;
      transition: all 500ms;
    }

    &-detail {
      position: relative;
      margin-left: 50px;
      height: 176px;
      width: 629px;
      display: flex;
      flex-direction: column;
      transition: all 500ms;
    }

    &-title {
      position: absolute;
      top: 80px;
      left: 450px;

      @include fn.ellipsis(1);
      width: 629px;
      font-size: 18px;
      font-weight: bold;
      color: #222222;
      line-height: 24px;
      transition: all 500ms;
    }

    &-describe {
      position: absolute;
      top: 130px;
      left: 450px;
      // right: 0;

      @include fn.ellipsis(2);
      width: 629px;
      font-size: 16px;
      color: #939393;
      line-height: 24px;
      transition: all 500ms;
    }

    &-more {
      position: absolute;
      top: 240px;
      left: 450px;
      transition: all 500ms;
    }
  }

  &-pagination {
    bottom: 30px;
    left: 0;
    right: 0;
    margin: auto;
    height: 18px;
    width: fit-content;
    z-index: 11;
    display: flex;
    position: absolute;
    transition: all 500ms;

    .swiper-pagination-bullet {
      width: 18px;
      height: 18px;
      background-size: 100% 100%;
      background-position: center;
      background-repeat: no-repeat;
      background: url("~@/assets/image/innovation/dot-1.png");
    }

    .swiper-pagination-bullet-active {
      background: url("~@/assets/image/innovation/dot-2.png");
    }
  }

  &-button {
    width: 20px;
    height: 79px;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 11;

    &:hover {
      background-color: color.$base;
    }

    &-prev {
      left: 0;
      background-image: url("~@/assets/image/home/ic_left.png");

      &:hover {
        background-image: url("~@/assets/image/home/ic_left_white.png");
      }
    }

    &-next {
      right: 0;
      background-image: url("~@/assets/image/home/ic_right.png");

      &:hover {
        background-image: url("~@/assets/image/home/ic_right_white.png");
      }
    }
  }
}
</style>


<style lang="scss" scoped>
@media screen and (max-width: 1200px) {
  .related {
    &-swiper {
      width: stretch;
    }

    &-slide {
    }

    &-item {
      height: fn.rpx(337);

      &-cover {
        margin-left: fn.rpx(30);
        @include fn.scale(fn.rpx(352));
        background-image: var(--mobile);
      }

      &-detail {
        position: relative;
        margin-left: 50px;
        height: 176px;
        width: 629px;
        display: flex;
        flex-direction: column;
      }

      &-title {
        top: fn.rpx(30);
        left: fn.rpx(30);

        @include fn.ellipsis(1);
        width: fn.rpx(630);
        font-size: fn.rpx(18);
        line-height: fn.rpx(24);
      }

      &-describe {
        top: fn.rpx(70);
        left: fn.rpx(420);

        @include fn.ellipsis(5);
        width: fn.rpx(270);
        font-size: fn.rpx(16);
        line-height: fn.rpx(24);
      }

      &-more {
        top: fn.rpx(200);
        left: fn.rpx(420);
      }
    }

    &-pagination {
      bottom: fn.rpx(30);
      height: fn.rpx(18);

      .swiper-pagination-bullet {
        width: fn.rpx(18);
        height: fn.rpx(18);
      }
    }

    &-button {
      display: none;
    }
  }
}
</style>